<template>
  <div class="app-container">
    <el-row type="flex" justify="space-between" class="bgfff">
      <el-col :span="9">
        <ul class="tab">
          <li v-for="(item, index) in tab" @click="change(index)" :class="idx == index ? 'on' : ''">{{ item.roomName
            }}
          </li>

        </ul>
      </el-col>
    </el-row>
    <div v-for="(item, index) in list">
      <p class="title">{{ item.roomName }}</p>
      <el-row :gutter="20" class="row">
        <el-col :span="6" v-for="(item1, index1) in item.tTablenumbers">
          <div class="item" @mouseenter="getDetail(item1.tOpenTable.bak2)" @click="handle(item1.status,item,item1)">
            <div class="status">
              <div class="num " :class="item1.status == 3?'otherColor':''">{{ item1.tablenumberId }}</div>
              <p v-if="item1.status == 0"><img src="@/assets/image/kaizhuo.png" alt=""></p>
              <p v-if="item1.status==3&&item1.tOpenTable.stopStatus == 1" class="otherColor"><img src="@/assets/image/pause.png" alt=""></p>
              <p v-if="item1.status==3&&item1.tOpenTable.stopStatus == 0" class="play otherColor"><img src="@/assets/image/play.png" alt=""><img src="@/assets/image/play.png" alt=""></p>
              <div v-if="item1.status==3">{{ item1.tOpenTable.stopStatus == 1 ? '已暂停' : '开桌中' }} {{
                item1.tOpenTable.useTime }}
              </div>
              <div v-if="item1.status == 0">未开桌</div>
              <!-- <div v-if="item1.status == 3">已开桌{{ item1.createTime }}</div>-->
              <div class="flexbox">

                <i class="el-icon-question" :class="item1.status == 3?'otherIcon':''"></i>
              </div>

            </div>
            <div class="detail" v-if="item1.tOpenTable">
              <el-row type="flex" justify="space-between">
                <el-col class="left">开桌时间 <span>{{ detail.openStartTime }}</span></el-col>
              </el-row>

              <!-- <el-row type="flex" justify="space-between">
                 <el-col class="left">开桌费用 <span>{{ detail.money }}元</span></el-col>
               </el-row>-->
              <el-button type="primary" class="detailBtn" @click="goRouter(detail.bak2)">
                查看详情 <i class="el-icon-arrow-down detailIcon"></i>
              </el-button>

            </div>
          </div>
        </el-col>

      </el-row>
    </div>
    <el-dialog title="开桌计时" :visible.sync="visible" width="500px">
      <timing :close.sync="visible" :room="room" :table="table" @loadIndex="getList"></timing>
    </el-dialog>


  </div>
</template>

<script>
  import timing from '../../monitor/online/timing'
  import dialogContent from '../../monitor/job/dialogContent'
  import priceDialog from '../../monitor/job/priceDialog'
  import {
    deskList,
    getOpenTableInfo,
    getShopData,
    changeTable,
    getTableList,
    stopTime,
    cancelOpenTable,
    addShopId
  } from "@/api/mahjong/cost";

  import {frontlist} from "@/api/mahjong/room";

  export default {
    name: "",
    components: {dialogContent, priceDialog, timing},
    data() {
      return {
        tab: ['全部', '大厅', '包房'],
        idx: 0,
        input: '',
        open2: false,
        visible: false,
        visible1: false,
        changeDialog: false,
        timeDialog: false,
        mergeDialog: false,
        packageDialog: false,
        visiblePriceDialog: false,
        operationDialog: false,
        value: true,
        table: '',
        list: [],

        form1: {},
        room: '',
        detail: '',
        options: [],
        dianpu: '选择店铺',
        deskLists: [],
        activeName: '',
        radio: '',
        form: {

          isTime: 1,
          newTableId: '',
          orderNumber: '',
          roomType: '',
          shopId: '',
          roomId: ''

        }
      }
    },

    created() {
      this.initData()
      this.getList()

    },
    methods: {
      goRouter(e) {
        console.log(e);
        this.$router.push('/desk/details/' + e)


      },


      handleUpdateOther(row) {
        this.reset();
        const id = row.id || this.ids
        getMember(id).then(response => {
          this.form = response.data;
          this.form.likes = this.coverList(this.form.likes);
          this.form.americanMahjong = this.coverList(this.form.americanMahjong);
          this.form.custom = this.coverList(this.form.custom);
          this.form.customMahjong = this.coverList(this.form.customMahjong);
          this.form.different = this.coverList(this.form.different);
          this.form.matchMahjong = this.coverList(this.form.matchMahjong);
          this.form.ordinaryMahjong = this.coverList(this.form.ordinaryMahjong);
          this.form.playingTime = this.coverList(this.form.playingTime);
          this.form.taboo = this.coverList(this.form.taboo);
          this.open2 = true;
          this.title = "会员特点维护";
        });
      },
      coverList(e) {
        if (e) {
          return e.split(",");
        }
        return e
      },

      initData() {

        /*getTableList().then(response => {

          this.deskLists = response.data;
          this.form.roomId = response.data[0].id
          this.form.newTableId = response.data[0].tTablenumbers[0].id

        });*/
        getShopData().then(response => {
          this.options = response.data;


        });
        frontlist().then(response => {
          this.tab = response.data;
        });
      },
      handle(status, item, item1) {
        if (status == 0) {
          this.visible = true
          this.room = item
          this.table = item1

        }
      },
      confirmTable() {
        changeTable(this.form).then(response => {
          if (response.code == 200) {
            this.$message({
              type: 'success',
              message: response.msg
            });
          }


        });
        this.changeDialog = false
      },
      handleChange(e) {
        this.form.newTableId = e
        this.deskLists.map(item => {
          item.tTablenumbers.map(item1 => {
            if (e == item1.id) {
              this.form.orderNumber = item1.tOpenTable.bak2
              this.form.roomType = item1.roomType
            }
          })
        })
      },
      choose(e) {
        console.log(e)
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getList() {
        deskList({}).then(response => {
          this.list = response.data;
        });
      },
      cancelTable(id) {
        this.$confirm('您确定要取消开桌吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          cancelOpenTable(id).then(response => {
            if (response.code == 200) {
              this.$message({
                type: 'success',
                message: response.msg
              });
              this.getList()
            }

          })

        })

      },
      pauseTable(id, status) {
        var title = ''
        status == 1 ? title = '确定要开启暂停吗？' : title = '确定要关闭暂停吗？'
        this.$confirm(title, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          stopTime({orderNumber: id, stopStatus: status}).then(response => {
            if (response.code == 200) {
              this.$message({
                type: 'success',
                message: response.msg
              });
              this.getList()
            }

          })

        })

      },
      handleCommand1(command) {
        this.options.map(item => {
          if (command == item.deptId) {
            this.dianpu = item.deptName
            this.form.shopId = command
          }
        })
        addShopId(command).then(response => {
          if (response.code == 200) {
            this.getList()
          }


        })

      },
      getDetail(id) {
        console.log('111111'+id)
        getOpenTableInfo({orderNumber: id}).then(response => {

          this.detail = response.data;
        })
      },
      change(index) {

        if (this.idx === index || index === undefined) {
          return false;
        } else {
          this.idx = index;
        }
      },
      over() {
        this.$confirm('结束后将不再继续计时，确认进行结账吗(xx分钟内不计费)', '结束开桌', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$confirm('余额不足，是否充值', '余额不足', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        })
      },
      handleCommand(command) {
        if (command == 'a') {
          this.packageDialog = true
        }
        if (command == 'b') {
          this.visiblePriceDialog = true
        }
        if (command == 'c') {
          this.operationDialog = true
        }
      }
    }
  };
</script>
<style scoped rel="stylesheet/scss" lang="scss">

  .detailBtn {
    background: url('../../../assets/image/bg.png') no-repeat;
    background-size: 100% 100%;
    padding-left: 40px;

    i {
      margin-left: 5px;
    }
  }

  .flexbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
  }

  .add {
    padding: 0 15px;
  }

  .rightForm {
    text-align: right;
    margin-top: 20px;
  }

  .min {
    width: 132px;
    margin-right: 10px;
  }

  .switch {
    margin-left: 96px;
  }

  .time {
    border: 1px solid #EBEEF5;
    width: 196px;
    height: 40px;
    line-height: 40px;
    color: #9C9186;
    font-size: 14px;
    display: inline-block;
    padding-left: 10px;
    margin-left: 10px;
  }

  .top {
    color: #201D1B;
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 15px;

    span {

      color: #9C9186;
    }

    .mar50 {
      margin-right: 75px;
    }
  }

  .btnRight {
    text-align: right;
    padding-right: 7px;
  }

  .app-container {
    padding: 0;

    .bgfff {
      background-color: #fff;
      align-items: center;
      padding: 10px 20px;

      .tab {
        li {
          display: inline-block;
          width: 70px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #9C9186;
          font-size: 16px;
          cursor: pointer;

          &.on {
            background-color: #CAAB62;
            color: #fff;
            border-radius: 2px;
          }
        }
      }

      .btn {
        text-align: right;

        span {
          display: inline-block;
          width: 100px;
          border: 1px solid #1085FF;
          color: #1085FF;
          font-size: 14px;
          border-radius: 2px;
          text-align: center;
          line-height: 40px;
          height: 40px;
          margin-left: 10px;
          cursor: pointer;

          &:hover,
          &:active,
          &:visited {
            background-color: #1085FF;
            color: #fff;
          }
        }
      }
    }

    .title {
      font-size: 18px;
      color: #201D1B;
      position: relative;
      padding: 20px 30px 15px;
      text-align: left;

      &::before {
        display: block;
        background-color: #CAAB62;
        width: 4px;
        height: 22px;
        content: '';
        position: absolute;
        left: 20px;
        top: 20px;
      }
    }

    .row {
      padding: 0 20px 20px;

      .item {
        // border: 4px solid transparent;
        border-radius: 4px;
        text-align: center;
        background-color: #fff;
        cursor: pointer;
        color: #292929;
        font-size: 14px;
        padding-bottom: 20px;
        position: relative;
        margin-bottom: 20px;
        .play{
          img:first-child{
            margin-right: 10px;
          }
        }
        .detail {
          line-height: 30px;
          padding: 16px 20px 0;
          display: none;
          background-color: #fff;
          width: 100%;
          height: 100%;

          .left {
            text-align: left;
          }

          .right {
            text-align: right;
          }

          .left,
          .right span {
            color: #9C9186;

          }

          .right,
          .left span {
            color: #201D1B;
          }
        }

        .num {
          height: 70px;
          line-height: 70px;
          background-color: #CAAB62;
          color: #fff;
          font-size: 40px;

        }
        .otherColor{
          background-color: #62CA6C;
        }

        p {
          margin: 20px auto 10px;
          background-color: #CAAB62;
          width: 80px;
          height: 80px;
          padding-top: 15px;
          border-radius: 6px;
        }

        i:not(.detailIcon) {
          color: #CAAB62;
          position: absolute;
          bottom: 10px;
          right: 10px;
          font-size: 30px;

          &:hover {
          }
        }

        i.otherIcon{
          color: #62CA6C;
        }
      }

      .item:hover,
      .item:active,
      .item:visited {
        border: 4px solid #64CA62;
        padding-bottom: 12px;

        // .status{
        //   display: none;
        // }
        .detail {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }

  }
</style>
